<template>
    <div class="page">
        <div class="lists">
            <router-link :to="{name:'article',query:{id:article.id}}" v-for="article of articles" :key="article.id">{{article.title}}</router-link>
        </div>
        <div>
            <h2>{{arti.title}}</h2>
            <p>{{arti.content}}</p>
        </div>
    </div>
</template>

<script setup>
    import {ref,watch} from "vue"
    import {useRoute} from 'vue-router'
    const route = useRoute();
    const host = `http://127.0.0.1:3005/article`;
    let arti = ref([]);
    const articles = await fetch(host).then(r => r.json());
    watch(() => route.query,async query => {
        arti.value = await fetch(`${host}/${query.id ?? 1}`).then(r => r.json());
    },{immediate:true})
</script>

<style lang="scss" scoped>
    .page{
        display:flex;
        .lists{
            min-width:300px;
            margin-right: 20px;
            a{
                display: block;
                background-color:#16a085;
                color: #fff;
                padding:10px;
                box-sizing: border-box;
                margin-bottom: 10px;
            }
        }
    }
</style>